<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景缩写属性(Background abbreviation properties)</title>
  <!-- 
    CSS中的背景缩写属性（background abbreviation properties）允许您一次性设置元素的背景相关属性。
    背景缩写属性及其对应的含义： 
 
      background：包含背景图片image、背景颜色color、背景重复方式repeat、背景位置position、背景大小size等。 
        1. background-image：设置元素的背景图片。 
        2. background-color：设置元素的背景颜色。 
        3. background-repeat：设置背景图片的重复方式，如repeat、repeat-x、repeat-y、no-repeat等。 
        4. background-position：设置背景图片的位置，可以使用关键词（如top、center、bottom）或具体的像素值。 
        5. background-size：设置背景图片的大小，可以使用关键词（如cover、contain）或具体的像素值。 

    语法：background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-origin] [background-clip] [background-attachment];
   -->
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .background {
      height: 489px;
      background: url(../../images/mhxy.jpg) #f99 no-repeat center;
      margin-bottom: 20px;
    }

    .background-v1 {
      height: 489px;
      background: url(../../images/mhxy.jpg) #f99 no-repeat 20px 30px;
    }
  </style>
</head>

<body>

  <div class="background"></div>

  <div class="background-v1"></div>


</body>

</html>